<template>
  <div class="container">
    <div class="title" v-if="newBool == 2">统计分析</div>
    <div class="content" v-if="newBool == 2">
      <div class="text1">
        今日新增<span class="num">{{ this.data.jrxznum }}</span
        >人
      </div>
      <div class="text">
        当日参与人数<span class="num">{{ this.data.jrcynum }}</span>
      </div>
      <div class="text">
        当日抢购人数<span class="num">{{ this.data.qgrsnum }}</span>
      </div>
      <div class="text">
        当日抢购金额<span class="num">{{ this.data.qgjenum.toFixed(2) }}</span>
      </div>
      <div class="text">
        当日交易均额<span class="num">{{ this.data.pjprice.toFixed(2) }}</span>
      </div>
      <div class="text">
        当日新增人数<span class="num">{{ this.data.jrxznum }}</span>
      </div>
    </div>
    <div class="myContent" v-if="newBool == 0">
      <!-- <van-button round type="info" class="button" @click="shopowner">立刻申请</van-button> -->
    </div>
  </div>
</template>

<script>
import { getTongJi, addShopowner, getUserInfo } from "../../api/api";
export default {
  data() {
    return {
      data: {},
      newBool: 1,
    };
  },
  methods: {
    getInfo() {
      const data = {
        user_id: localStorage.getItem("userId"),
      };
      getUserInfo(data).then((res) => {
        this.$toast.clear();
        console.log("xinxi----", res.data.is_dianzhu);
        this.newBool = res.data.is_dianzhu;

        if (res.data.is_dianzhu == 2) {
          getTongJi(data).then((res) => {
            this.$toast.clear()
            this.data = res.data
            console.log("统计分析接口", res);
          });
        }
      });
    },
    shopowner() {
      const data = {
        user_id: localStorage.getItem("userId"),
      };
      addShopowner(data).then((res) => {
        this.$toast.success('申请成功');
        this.getInfo()
        console.log("成为店长---", res);
      });
    },
  },
  mounted() {},
  created() {
    this.getInfo();
  },
};
</script>

<style lang="less" scoped>
div {
  margin: 0;
  padding: 0;
}
.container {
  min-height: 100vh;
  background-color: #f1f1f1 !important;

  .title {
    width: 100%;
    height: 50px;
    background-color: #333333;
    color: #fff;
    font-size: 1.2em;
    text-align: center;
    line-height: 50px;
    font-weight: 700;
    letter-spacing: 2px;
  }
  .content {
    padding: 0 3%;
    .text1 {
      font-size: 1em;
      letter-spacing: 1px;
      height: 60px;
      margin-top: 10px;
      line-height: 60px;
      border-bottom: 1px solid #e5e5e5;

      .num {
        color: #3ace8a;
        margin: 0 5px;
      }
    }
    .text {
      font-size: 1em;
      letter-spacing: 1px;
      height: 60px;
      border-bottom: 1px solid #e5e5e5;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .num {
        color: #3ace8a;
        margin-right: 10px;
      }
    }
  }
  .myContent {
    width: 100vw;
    height: 100vh;
    background-image: url("../../assets/image11.png");
    background-size: 100% 100%;

    .button {
      width: 80%;
      letter-spacing: 2px;
      position: fixed;
      bottom: 60px;
      left: 10%;
      background-color: #27191a;
    }
  }
}
</style>